<template>
  <div>
    <div v-if="storeTable.length<=0" style="margin-left: 20px ;margin-top: 20px">
      <el-empty description="啥也没有！">
      </el-empty>
    </div>
    <el-card class="box-cards" v-for="(store,index) in storeTable" :key="index">
      <div slot="header" class="clearfix">
        <span>商铺名称:{{store.storeName}}</span>
        <el-popover
          placement="left"
          width="400"
          v-model="visible">
          <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
            <el-form-item label="审核状态" prop="status" required>
              <el-switch v-model="formData.status" active-text="审核通过" inactive-text="审核不通过" active-color="#45CB0C"
                         inactive-color="#F10D0D" :active-value=1 :inactive-value=2></el-switch>
            </el-form-item>
            <el-form-item label="驳回原因" prop="rejectReason" v-if="formData.status===2">
              <el-input v-model="formData.rejectReason" type="textarea" placeholder="请输入驳回原因"
                        :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-form>
          <div style="text-align: right; margin: 0">
            <el-button size="mini" type="text" @click="visible = false">取消</el-button>
            <el-button type="primary" size="mini" @click="updateStoreStatus(store)">确定</el-button>
          </div>
          <el-button slot="reference" style="float: right; padding: 3px 0"
                     type="text" class="el-icon-edit" >审核</el-button>
        </el-popover>

      </div>
      <div>
        <div class="img-container">
          <div cLass="userinfo-container">
            <el-descriptions :column="4" title="图片信息" border style="margin-bottom: 5px">
              <el-descriptions-item label="商铺门头照"><img :src="store.storePic" class="avatar_imgs" ></el-descriptions-item>
              <el-descriptions-item label="营业执照照片"><img :src="store.businessLicensePic" class="avatar_imgs" ></el-descriptions-item>
              <el-descriptions-item label="身份证正面照"><img :src="store.idCardFront" class="avatar_imgs" ></el-descriptions-item>
              <el-descriptions-item label="身份证背面照"><img :src="store.idCardFront" class="avatar_imgs" ></el-descriptions-item>
            </el-descriptions>
            <el-descriptions :column="3" title="材料信息" border>
              <el-descriptions-item label="用户id">{{store.storeUserId}}</el-descriptions-item>
              <el-descriptions-item label="负责人">{{store.hostName}}</el-descriptions-item>
              <el-descriptions-item label="办公电话">{{store.officePhone}}</el-descriptions-item>
              <el-descriptions-item label="身份证ID">{{store.idCard}}</el-descriptions-item>
              <el-descriptions-item label="商铺名称">{{store.storeName}}</el-descriptions-item>
              <el-descriptions-item label="商铺地址">{{store.detailAddress}}</el-descriptions-item>
              <el-descriptions-item label="营业执照号">{{store.businessLicenseNo}}</el-descriptions-item>
              <!--<el-descriptions-item label="办公电话">{{store.day_price===''?store.single_price+'/每小时':history.day_price+'/每天'}}（总价格：{{history.tol_rent_price}}元）</el-descriptions-item>-->
              <!--<el-descriptions-item label="租赁状态">-->
              <!--<el-switch-->
              <!--disabled-->
              <!--v-model="status"-->
              <!--active-color="#13ce66"-->
              <!--inactive-color="#ff4949"-->
              <!--active-text="已完成">-->
              <!--</el-switch>-->
              <!--</el-descriptions-item>-->
              <el-descriptions-item label="紧急联系人姓名">{{store.impContactName}}</el-descriptions-item>
              <el-descriptions-item label="紧急联系人电话">{{store.impContactPhone}}</el-descriptions-item>
              <el-descriptions-item label="紧急联系人关系">{{store.impContactRelative}}</el-descriptions-item>
              <el-descriptions-item label="提交时间">{{store.createTime}}</el-descriptions-item>
            </el-descriptions>
          </div>
        </div>
      </div>
    </el-card>
    <!--分页条-->
    <div style="width: 50%; margin: 0 auto" v-if="storeTable.length>0">
      <el-pagination
        class="pagination"
        style="padding-top: 15px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[1, 5, 10, 30]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <!--<el-table-->
      <!--:data="storeTable"-->
      <!--style="width: 100%"-->
      <!--:default-sort = "{prop: 'createTime', order: 'descending'}"-->
    <!--&gt;-->
      <!--<el-table-column-->
        <!--prop="storeId"-->
        <!--label="商铺ID"-->
        <!--sortable-->
        <!--width="60">-->
      <!--</el-table-column>-->
      <!--<el-table-column-->
        <!--prop="storeUserId"-->
        <!--label="用户ID"-->
        <!--sortable-->
        <!--width="60">-->
      <!--</el-table-column>-->
      <!--<el-table-column-->
        <!--prop="officePhone"-->
        <!--label="办公电话"-->
        <!--width="80">-->
      <!--</el-table-column>-->
      <!--<el-table-column-->
        <!--prop="storeName"-->
        <!--label="商铺名称"-->
        <!--width="120">-->
      <!--</el-table-column>-->
      <!--<el-table-column-->
        <!--prop="detailAddress"-->
        <!--label="商铺地址"-->
        <!--width="120">-->
      <!--</el-table-column>-->
      <!--<el-table-column-->
        <!--prop="businessLicenseNo"-->
        <!--label="营业执照号"-->
        <!--width="120">-->
      <!--</el-table-column>-->
      <!--<el-table-column-->
        <!--prop="businessLicensePic"-->
        <!--label="营业执照照片"-->
        <!--width="120">-->
        <!--<template #default="scope">-->
          <!--<el-image class="table-td-thumb" :src="scope.row.businessLicensePic" :preview-src-list="[scope.row.businessLicensePic]">-->
          <!--</el-image>-->
        <!--</template>-->
      <!--</el-table-column>-->
      <!--<el-table-column-->
        <!--property="storePic"-->
        <!--label="店铺门头照"-->
        <!--width="100">-->
        <!--<template #default="scope">-->
          <!--<el-image class="table-td-thumb" :src="scope.row.storePic" :preview-src-list="[scope.row.storePic]">-->
          <!--</el-image>-->
        <!--</template>-->
      <!--</el-table-column>-->
      <!--<el-table-column-->
        <!--prop="hostName"-->
        <!--label="负责人"-->
        <!--width="120">-->
      <!--</el-table-column>-->
      <!--<el-table-column-->
        <!--prop="idCard"-->
        <!--label="身份证ID"-->
        <!--width="170">-->
      <!--</el-table-column>-->
      <!--<el-table-column-->
        <!--prop="idCardFront"-->
        <!--label="身份证正面照"-->
        <!--width="160">-->
        <!--<template #default="scope">-->
          <!--<el-image class="table-td-thumb" :src="scope.row.idCardFront" :preview-src-list="[scope.row.idCardFront]">-->
          <!--</el-image>-->
        <!--</template>-->
      <!--</el-table-column>-->
      <!--<el-table-column-->
        <!--prop="idCardBack"-->
        <!--label="身份证背面照"-->
        <!--width="160">-->
        <!--<template #default="scope">-->
          <!--<el-image class="table-td-thumb" :src="scope.row.idCardBack" :preview-src-list="[scope.row.idCardBack]">-->
          <!--</el-image>-->
        <!--</template>-->
      <!--</el-table-column>-->
      <!--<el-table-column-->
        <!--prop="score"-->
        <!--label="积分"-->
        <!--width="160">-->
      <!--</el-table-column>-->
      <!--<el-table-column-->
        <!--prop="rejectReason"-->
        <!--label="驳回原因"-->
        <!--width="300"-->
        <!--:show-overflow-tooltip="true">-->
      <!--</el-table-column>-->
      <!--<el-table-column-->
        <!--prop="impContactName"-->
        <!--label="紧急联系人姓名"-->
        <!--width="160">-->
      <!--</el-table-column>-->
      <!--<el-table-column-->
        <!--prop="impContactPhone"-->
        <!--label="紧急联系人电话"-->
        <!--width="160">-->
      <!--</el-table-column>-->
      <!--<el-table-column-->
        <!--prop="impContactRelative"-->
        <!--label="紧急联系人关系"-->
        <!--width="160">-->
      <!--</el-table-column>-->
      <!--<el-table-column-->
        <!--prop="cashStatus"-->
        <!--label="押金支付状态"-->
        <!--width="160">-->
      <!--</el-table-column>-->
      <!--<el-table-column-->
        <!--prop="cashSecurity"-->
        <!--label="押金"-->
        <!--width="160">-->
      <!--</el-table-column>-->
      <!--<el-table-column-->
        <!--prop="openTime"-->
        <!--label="创建时间"-->
        <!--sortable-->
        <!--width="180">-->
      <!--</el-table-column>-->
      <!--<el-table-column-->
        <!--label="状态"-->
        <!--prop="status"-->
        <!--width="160">-->
        <!--&lt;!&ndash;icon="el-icon-edit"&ndash;&gt;-->
        <!--<template slot-scope="scope">-->
          <!--<el-button-->
            <!--type="primary" size="mini"  plain-->
            <!--@click="showEditView(scope.$index, scope.row,true)">-->
            <!--{{scope.row.status==false?'':'未审核'}}-->
          <!--</el-button>-->
        <!--</template>-->
      <!--</el-table-column>-->
    <!--</el-table>-->

  </div>
</template>

<script>
  export default {
    name: 'StoreComfirm',
    data() {
      return {
        // 每页显示的条数
        size: 1,
        // 总条数
        total: 100,
        // 当前页码
        current:1,
        storeTable:[],
        visible: false,
        formData: {
          storeId:undefined,
          status: 2,
          rejectReason: undefined,
        },
        rules: {
          rejectReason: [{
            message: '请输入驳回原因',
            trigger: 'blur'
          }],
        },
        // options: [{
        //   value: 1,
        //   label: '通过'
        // }, {
        //   value: 0,
        //   label: '不通过'
        // }],
        // comfirm:{
        //   userId:'',
        //   enabledSuggest: '',
        //   enabled:'',
        // },
        // dialogFormVisible:false,
        // size: 'small',
        // restaurants: [],
      }
    },
    mounted () {
      this.initTable();
      // this.restaurants = this.loadAll();
    },
    methods: {
      // 当每页条数改变时
      handleSizeChange(val) {
        // 将val重新复制给size
        this.size=val;
        // 重新去后台查询数据
        this.initTable();
      },
      // 当每页码数改变时
      handleCurrentChange(val) {
        // 将val重新复制给current
        this.current=val;
        this.initTable();
      },
      // 更新店铺状态
      updateStoreStatus(item) {
        this.formData.storeId=item.storeId
        console.log(this.formData)
        this.putRequest('/good/data/store',this.formData).then(resp => {
          if (resp) {
            this.visible=false
            this.initTable()
            this.$notify.success({ title: '成功', message: resp.message });
            this.formData.storeId=''
            this.formData.status=2
          }
        })
      },

      // handleSelect(item) {
      //   console.log(item);
      // },
      // handleSelects(item) {
      //   console.log(item);
      // },
      //显示弹出框赋值
      // doUpdate(){
      //   this.comfirm.userId=this.highdata.userId;
      //   if (this.comfirm.enabled===0||this.comfirm.enabled===1){
      //     // 修改用户认证的状态
      //     this.putRequest('/personal/data/comfirm/',this.comfirm).then(resp=>{
      //       if (resp){
      //         this.dialogFormVisible=false;
      //         this.initTable();
      //
      //         this.$notify.success({ title: '成功', message: '审核成功' });
      //
      //       }
      //     })
      //   } else {
      //
      //     this.$notify.info({ title: '消息', message: '请输入审核状态' });
      //   }
      // },
      // doCancel(){
      //   const h = this.$createElement;
      //   this.$notify({
      //     message: h('i', { style: 'color: red'}, '已取消审核操作')
      //   });
      //   this.dialogFormVisible = false;
      // },
      // showEditView(index,data){
      //   Object.assign(this.highdata,data);
      //   this.dialogFormVisible=true;
      //   // Object.assign(this.good,data);
      // },
      // formatter(row, column) {
      //   return row.address;
      // },
      initTable(){
        this.getRequest('/good/data/store/?current='+this.current+'&&size='+this.size).then(resp => {
          if (resp) {
            this.storeTable = resp.records;
            this.total = resp.total;
          }
        })
      },
      // querySearch(queryString, cb) {
      //   var restaurants = this.restaurants;
      //   var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      //   // 调用 callback 返回建议列表的数据
      //   cb(results);
      // },
      // createFilter(queryString) {
      //   return (restaurant) => {
      //     return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      //   };
      // },
      // loadAll() {
      //   return [
      //     { "value": "姓名与身份证号不符"},
      //     { "value": "地址不存在"},
      //     { "value": "手机号为空"},
      //     { "value": "邮箱为空"},
      //     { "value": "店铺门头照与店铺名称不符"},
      //     { "value": "店铺门头照不清晰"},
      //     { "value": "店铺不存在"}
      //   ];
      // },
    }
  }
</script>

<style scoped>
  .suggest{
    margin-left: 25px;
  }
  .table-td-thumb{
    width: 40px;
    margin: 4px;
  }
  .text {
    font-size: 14px;
  }
  .user-container{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-top: 30px;
  }
  .box-cards{
    width: 80%;
    margin: 0 auto;
  }
  .avatar_imgs{
    width: 100px;
    height: 80px;
    margin-right: 20px;
  }
  .img-container{
    width: 100%;
    display: flex;
    margin-left: 10px;
  }
  .userinfo-container{
    font-size: 14px;
    color: cornflowerblue;
    width: 100%;
  }

</style>
